<template>
  <div id="container">地图</div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  mounted() {
    var map = new BMapGL.Map('container')
    // 116.404表示经度，39.915表示纬度
    // 坐标查看工具
    // http://api.map.baidu.com/lbsapi/getpoint/index.html
    var point = new BMapGL.Point(120.362893, 30.312237)
    // 初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别\
    map.centerAndZoom(point, 15)
    // 绘制圆 用文本标注 https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/label
    var content = '宝山<br>85套'
    var label = new BMapGL.Label(content, {
      // 创建文本标注
      position: point, // 设置标注的地理位置
      offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
    })
    map.addOverlay(label) // 将标注添加到地图中
    // 修改样式、
    label.setStyle({
      // 设置label的样式
      color: '#000',
      fontSize: '16px',
      border: '2px solid #1E90FF',
      width: '100px',
      height: '80px',
      borderRadius: '50%',
      backgroundColor: 'lime',
      textAlign: 'center',
      paddingTop: '20px'
    })

    //给圆绑定点击事件
    label.addEventListener('click', function () {
      alert('您点击了标注')
    })
  }
}
</script>

<style scoped lang="less">
#container {
  height: 100vh;
}
</style>
